extends layout

block headcontent
	script(type='text/javascript')
		var url = "!{fullURL}";
		var empList = !{JSON.stringify(employees)};

block content
	span= gvar
	#emp_list.row
		- for (var i = 0; i < employees.length; ++i) {
			.col-xs-6.col-md-4.col-lg-3
				- if(employees[i].isPresent)
					case employees[i].status
						when 'active'
							button.btn.btn-block.btn-success.btn-lg.active(id='emp_'+employees[i].id data-roster-id=employees[i].id)
								i.glyphicon.glyphicon-refresh.spinner
								span.name= employees[i].name
						when 'done'
							button.btn.btn-block.btn-success.btn-lg(id='emp_'+employees[i].id data-roster-id=employees[i].id)
								i.glyphicon.glyphicon-ok-circle
								span.name= employees[i].name
						default
							button.btn.btn-block.btn-default.btn-lg(id='emp_'+employees[i].id data-roster-id=employees[i].id)
								i.glyphicon.glyphicon-record
								span.name= employees[i].name
				- else
					button.btn.btn-block.btn-warning.btn-lg(id='emp_'+employees[i].id data-roster-id=employees[i].id)
						i.glyphicon.glyphicon-remove-circle
						span.name= employees[i].name
		- }
	#emp_settings.row
		- for (var i = 0; i < employees.length; ++i) {
			.col-xs-6.col-md-4.col-lg-3.btn-lg
				span.name= employees[i].name
				- if(employees[i].isPresent)
					input(type="checkbox" id="emp_present_"+employees[i].id data-roster-id=employees[i].id class="is-present" checked)
					label(for="emp_present_"+employees[i].id) Present
				- else
					input(type="checkbox" id="emp_present_"+employees[i].id data-roster-id=employees[i].id class="is-present")
					label(for="emp_present_"+employees[i].id) Present

		- }
	br
	br
	.row
		.col-xs-12.col-md-6.col-lg-6.align-right
			button.btn.btn-info#settingBtn
				span Settings
		.col-xs-12.col-md-6.col-lg-6
			button.btn.btn-danger#resetBtn
				span Reset